<template>
  <div>
    <mt-header fixed title="选择疾病">
      <mt-button icon="back" @click="$router.back()" slot="left"></mt-button>
    </mt-header>
    <div class="lists">
        <div>
            <ul>
                <li :class="{active : now == kid}" @click="goto(kid)" v-for="{kid,kvalue} of dataList" :key="kid"><span>{{kvalue}}</span></li>
            </ul>
        </div>
        <div>
            <ul>
                <li v-for="{xvalue,xid} in familys" :key="xid">{{xvalue}}</li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
export default {
 data() {
    return {
        now:1,dataList:[],familys:[],
    }
 },
 methods: {
    getData(url,arr,callback) {
        if (arr.length == 0) {
            // 调用方法执行加载
            this.$indicator.open({
            text: "加载中...",
            spinnerType: "fading-circle",
            });
        }
        this.axios.get(url).then(res=>{
            callback(res.data.data)
            if(res){
                this.$indicator.close()
            }
        })
    },
    goto(value){
        this.now = value
        this.getData(`/management_all?kid=${value}`,this.familys,(data)=>{
            this.familys = data
        })
    },
 },
 mounted(){
    this.getData('/management',this.dataList,(data)=>{
        this.dataList = data
    })
    this.getData(`/management_all?kid=1`,this.familys,(data)=>{
        this.familys = data
    })
 },
};
</script>

<style lang="scss" scoped>
::v-deep .mint-header,
::v-deep .mint-header-title,
::v-deep .mintui {
  background-color: #fff;
  color: #000;
  font-size: 1.5rem;
  font-family: '楷体';
  font-weight: 600;
}
.lists{
    width: 100vw;
    margin-top: 10vh;
    display: flex;
    >:nth-child(1){
        flex: 1;
        height: 90vh;
        background: #f6f6f6;
        overflow: auto;
        &::-webkit-scrollbar {
            display: none;
        }
        >ul{
            li{
                box-sizing: border-box;
                border-bottom: 0.5vw solid #ebebeb;
                width: 100%;
                height: 6vh;
                line-height: 6vh;
                position: relative;
                span{
                    padding: 0 3vh;
                }
                &.active{
                    background: #fff;
                    border-bottom: 0;
                    &::before{
                        content: '';
                        display: inline-block;
                        width: 0;
                        height: 0;
                        border-top: 2vw solid transparent;
                        border-left: 2vw solid transparent;
                        border-right: 2vw solid #32DFBF;
                        margin-right: 2vw;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-30%) rotate(-45deg);
                    }
                }
            }
        }
    }
    >:nth-child(2){
        flex: 1;
        height: 90vh;
        overflow: auto;
        &::-webkit-scrollbar {
            display: none;
        }
        >ul{
            display: flex;
            flex-flow: column nowrap;
            >li{
                box-sizing: border-box;
                width: 100%;
                height: 5vh;
                line-height: 5vh;
                padding: 0 3vh;
            }
        }
    }
}
</style>
